<template>
  <el-dialog
    :title="dialogTitle || '选择目录'"
    :visible="dialogVisible"
    append-to-body
    close-on-press-escape
    :close-on-click-modal="false"
    custom-class="custom-dialog"
    @open="loadRootFolders"
    @close="closeDialog"
    width="450px"
  >
    <div class="custom-table" style="height: 18rem; overflow-y: auto;">
      <div
        class="easy-container-min flex align-items-center pointer"
        :class="selectedFolder.id ? '' : 'el-alert--success is-light'"
        @click="folderSelect"
      >
        <i class="cell f-normal shrink-0" :class="folderIcon"></i>
        <div class="line1">根目录</div>
      </div>
      <div
        v-show="folderOpened"
        class="p-l-16 custom-table"
        v-infinite-scroll="infiniteLoad"
        :infinite-scroll-disabled="!loadPage || loading"
      >
        <folders-tree-item
          v-for="folder in folders"
          :key="folder.id"
          :folder="folder"
          :moving-id="moveResourceId"
        />
      </div>
    </div>
    <div slot="footer" class="flex content-space-between">
      <el-button type="primary" @click="folderConfirm" :loading="moving">确定</el-button>
      <el-button slot="reference" @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { formatResources } from '@/components/spaces/resources-v2/format';
import FoldersTreeItem from './folders-tree-item';

export default {
  name: 'select-folder-dialog',
  components: { FoldersTreeItem },
  props: {
    dialogVisible: Boolean,
    dialogTitle: String,
    spaceId: {
      type: Number,
      required: true,
    },
    selectedFolderId: {},
    selectedFolderPath: String,
    moveResource: Boolean,
    moveResourceId: {},
  },
  data() {
    return {
      folders: [],
      folderOpened: false,
      loading: false, // 加载目录数据
      moving: false, // 正移动
      loadPage: 1,
    };
  },
  computed: {
    ...mapState(['selectedFolder']),
    folderIcon() {
      if (this.loading) return 'el-icon-loading';
      else if (this.folderOpened) return 'el-icon-folder-opened';
      return 'el-icon-folder';
    },
  },
  methods: {
    ...mapActions(['setSelectedFolder']),
    // 加载根目录
    loadRootFolders() {
      this.loading = true;
      this.$api.spaceResources.index({
        spaceId: this.spaceId,
        type: ['ProductFolder'],
        page: this.loadPage,
      }).then((res) => {
        this.folders = this.folders.concat(formatResources(res.data));
        if (this.loadPage === 1) this.folderSelect(); // 当加载第一页的时候才触发点击
        this.loadPage = res.kaminari.next_page;
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
    infiniteLoad() {
      if (this.loadPage > 1) this.loadRootFolders();
    },
    // 选择了目录
    folderSelect() {
      this.folderOpened = !this.folderOpened;
      this.setSelectedFolder();
    },
    // 确认选择的目录
    folderConfirm() {
      if (this.moveResource && this.moveResourceId) {
        this.moving = true;
        this.$api.spaceResources.move({
          spaceId: this.spaceId,
          resourceId: this.moveResourceId,
          folderId: this.selectedFolder.id || 'root',
        }).then(() => {
          this.$message.success('移动成功');
          this.$emit('movedResource');
        }).catch(() => {})
          .then(() => { this.moving = false; });
      } else {
        this.$emit('update:selectedFolderId', this.selectedFolder.id);
        this.$emit('update:selectedFolderPath', this.selectedFolder.displayPath || '根目录');
      }
      this.closeDialog();
    },
    closeDialog() {
      if (this.moveResource) this.setSelectedFolder(); // 当移动目录时，关闭清空选择，避免下次打开选到自己的子目录
      this.$emit('update:dialogVisible', false);
      this.resetDialog();
    },
    // 关闭时清空，再打开时重新加载，不然会出现无法加载刚创建的目录的情况
    resetDialog() {
      this.folders = [];
      this.folderOpened = false;
      this.loadPage = 1;
    },
  },
};
</script>

<style></style>
